import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Bar } from '@ant-design/plots';

export type barHProps = {
  height?: number;
  borderColor?: string;
  xAxisData?: {};
  yAxisData?:{};
  forceFit?: boolean;
  maxColumnWidth?:number;
  xField?:string, //value
  yField?:string, //year
  data?:[];//{year: '1958 年',value: 48},
};

const BarHChart :React.FC<barHProps> = (props) => {
  const height = props.height || 100;
  let xAxisData = props.xAxisData || {};
  let yAxisData = props.yAxisData || {};
  let xAxis = {label:null,text:null,line:null,tickLine:null,grid:null,...xAxisData}
  let yAxis = {label:null,text:null,line:null,tickLine:null,grid:null,...yAxisData}
  const data = [{year: '1958 年',value: 48}];
  const config = {
    data,
    xField: props.xField,
    yField: props.yField,
    xAxis: xAxis,
    yAxis: yAxis,
    maxBarWidth:10,
    legend: {
      position: 'top-left',
    },
  };
  return (
    <div style={{ height:height,width:'100%' }}>
      {
        height>0 && data.length>0 &&
        <Bar {...config}/>
      }
    </div>
  );
};
export default BarHChart;